<template>
  <div id="app">
    <!-- <transition> -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    <!-- </transition> -->
    <a href="javascript:void(0)" class="home-button" @click="goHome" v-if="isHomeButtonShow && $route.meta.homeButton">
      <svg class="icon" style="width: 1.259765625em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1290 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2122"><path d="M1096.66 401.743l-444.409-444.409h-32.106l-466.376 456.238-32.106 30.416 15.208 38.865h116.594v493.413h746.878v-493.413h116.594l16.898-38.865-37.175-42.244zM743.498 928.951h-47.314v-491.723h-185.875v209.531h-47.314v-256.845h280.502v539.036z" fill="#1296db" p-id="2123"></path></svg>
    </a>
    <div id="loader" class="loader" v-if="showLoading">
      <div class="line-scale-pulse-out"><div></div><div></div><div></div><div></div><div></div></div>
    </div>
    <redpack :data="redpackData" v-if="redpackData"></redpack>
    <x-dialog v-model="bindPhoneDialog">
      <group title="您还没有绑定手机号！请绑定手机才能继续使用早教CRM" class="weui-cells_form">
        <x-input v-model="phone" title="手机号" :class="{'weui-cell_warn': phoneError === false }" class="weui-cell_vcode">
          <img slot="right" class="weui-vcode-img">
        </x-input>
        <x-input v-model="verifyCode" title="发送验证码" :class="{'weui-cell_warn': verifyCodeError === false }" class="weui-vcode">
          <x-button slot="right" type="primary" mini v-if="finish === true" @click.native="send()">发送验证码</x-button>
          <x-button slot="right" type="primary" mini v-if="finish === false">{{ countDown }}s后发送</x-button>
        </x-input>
      </group>
      <div style="padding: 10px 0; color: red;" v-if="msg">{{ msg }}</div>
      <div style="padding: 10px 0;"><span class="scrm-default-btn" @click="bindMobile()">绑定</span></div>
    </x-dialog>
    <x-dialog v-model="success">
      <div class="dialog-message">
        绑定手机成功
      </div>
      <span class="vux-close" @click="success = false">知道了</span>
    </x-dialog>
    <!-- <redpack ></redpack> -->
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import axios from 'axios'
import Q from 'q'
import Redpack from './components/redpack'
import XDialog from 'vux/src/components/x-dialog'
import Group from 'vux/src/components/group'
import XButton from 'vux/src/components/x-button'
import XInput from 'vux/src/components/x-input'
export default {
  name: 'app',
  watch: {
    isLoading (status) {
      if (status === true) {
        this.$vux.loading.show({text: '加载中...'})
      } else {
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 900)
      }
    },
    user (value) {
      this.initialize(value)
    }
  },
  beforeMount () {
    axios.interceptors.response.use(response => {
      Q.Promise((resolve, reject) => {
        if (typeof response.data.results !== 'undefined' && response.data.results && typeof response.data.results.redpacket !== 'undefined') {
          this.redpackData = null
          setTimeout(() => {
            const redpacket = response.data.results.redpacket
            if (typeof redpacket.maxmoney !== 'undefined' && redpacket.maxmoney ) {
              this.redpackData = redpacket
            }
          })
        }
        resolve()
      }).catch(() => {
      })
      return response
    })
  },
  components: {
    Redpack,
    XDialog,
    Group,
    XButton,
    XInput
  },
  methods: {
    initialize (user) {
      const filterOptions = this.filterOptions
      filterOptions[1]['options'][1].show = user.is_team_manager === 1
      this.updateFilterOptions(filterOptions)
      console.log('user.username', user, user.id, user.username)
      if(user.id) this.bindPhoneDialog = !user.username ? true : false
    },
    send () {
      this.phoneError = !!this.phone

      if (!this.phone) return

      this.sendSmsCode({ mobile_num: this.phone, verifycode: this.verifyCode })
      this.finish = false
      this.cid = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown --
          if (this.countDown < 10) {
            this.countDown = '0' + this.countDown
          }
        } else {
          clearInterval(this.cid)
          this.finish = true
          this.countDown = 60
        }
      }, 1000)
    },
    goHome () {
      this.$router.push({name: 'workbench'})
    },
    bindMobile () {
      this.verifySmscode({ mobile_num: this.phone, verifycode: this.verifyCode })
        .then((data) => {
          if (data.errcode === 0) {
            this.bindPhoneDialog = false
            setTimeout(() => {
              this.success = true
            }, 1000)
          } else {
            this.msg = data.errmsg
          }
        }).catch(() => {
          this.msg = '系统错误！请联系管理员!'
        })
    },
    ...mapActions({
      updateFilterOptions: 'updateFilterOptions',
      sendSmsCode: 'sendSmsCode',
      verifySmscode: 'verifySmscode'
    })
  },
  computed: {
    ...mapState({
      isLoading: state => state.app.isLoading,
      user: state => state.app.user,
      isHomeButtonShow: state => state.config.isHomeButtonShow,
      filterOptions: state => state.app.filterOptions
    })
  },
  mounted () {
    this.initialize(this.user)
  },
  data () {
    return {
      location: {},
      errors: {},
      redpackData: null,
      bindPhoneDialog: false,
      finish: true,
      countDown: 60,
      phone: null,
      verifyCode: null,
      msg: '',
      phoneError: null,
      verifyCodeError: null,
      success: false,
      showLoading: true
    }
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
.home-button {
  position: fixed;
  z-index: 100;
  right: 26px;
  bottom: 76px;
  cursor: pointer;
  font-size: 32px;
  display: block;
  width: 30px;
  height: 30px;
  // background: url('//fin.91mycloud.com/Home_logo.png') no-repeat center ;

  background-size: 100%;
}
</style>
